<template>
  <div class="app-container">
    <!-- 配置导航 -->
    <el-tabs tab-position="left">

      <!-- 首页配置 -->
      <el-tab-pane label="首页配置">
        <el-tabs tab-position="top" v-model="shouye" type="border-card">
          <el-tab-pane label="首页轮播图" name="lunbo">
            <el-form ref="slideshowForm" :model="slideshowForm" :rules="slideshowRules" label-width="80px">
              <!-- <el-form-item label="位置" prop="position">
                <el-select v-model="slideshowForm.position" placeholder="请选择位置">
                  <el-option v-for="dict in dict.type.slideshow_position" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="slideshowForm.status">
                  <el-radio v-for="dict in dict.type.slideshow_status" :key="dict.value" :label="dict.value">{{
                    dict.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="图片" prop="pic">
                <image-upload v-model="slideshowForm.pic" :limit="6" />
              </el-form-item>
              <el-form-item label="URL" prop="url">
                <el-input v-model="slideshowForm.url" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('slideshowForm')">提交</el-button>
              </el-form-item>
            </el-form>

          </el-tab-pane>
          <!-- <el-tab-pane label="测试标签" name="ceshi">
            测试标签
          </el-tab-pane> -->
        </el-tabs>
      </el-tab-pane>

      <!-- 客服配置 -->
      <el-tab-pane label="客服配置">
        <el-tabs tab-position="top" v-model="kefu" type="border-card">
          <el-tab-pane label="客服配置" name="kefu">
            <el-form ref="kefuForm" :model="kefuForm" :rules="kefuRules" label-width="80px">

              <el-form-item label="二维码" prop="qrcode">
                <!-- <el-input v-model="kefuForm.qrcode" type="textarea" placeholder="请输入内容" /> -->
                <image-upload v-model="kefuForm.qrcode" :limit="1" />
              </el-form-item>
              <el-form-item label="URL" prop="url">
                <el-input v-model="kefuForm.url" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              <el-form-item label="客服代码" prop="code">
                <el-input v-model="kefuForm.code" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              <el-form-item label="启用选项" prop="enableOption">
                <!-- <el-input v-model="kefuForm.enableOption" placeholder="请输入启用选项" /> -->
                <el-radio v-model="kefuForm.enableOption" label="二维码">二维码</el-radio>
                <el-radio v-model="kefuForm.enableOption" label="URL">URL</el-radio>
                <el-radio v-model="kefuForm.enableOption" label="客服代码">客服代码</el-radio>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="kefuForm.status">
                  <el-radio v-for="dict in dict.type.default_status" :key="dict.value" :label="dict.value">{{ dict.label
                    }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('kefuForm')">提交</el-button>
              </el-form-item>
            </el-form>

          </el-tab-pane>
          <!-- <el-tab-pane label="测试标签" name="ceshi">
            测试标签
          </el-tab-pane> -->
        </el-tabs>
      </el-tab-pane>

      <!-- 存储配置 -->
      <el-tab-pane label="存储配置">
        <el-tabs tab-position="top" v-model="cunchu" type="border-card">

          <!-- 七牛云存储 -->
          <el-tab-pane label="七牛云存储" name="qiniu">
            <el-form :model="qiniuForm" :rules="qiniuRules" ref="qiniuForm" label-width="100px">
              <el-form-item label="accessKey" prop="accessKey">
                <el-input v-model="qiniuForm.accessKey"></el-input>
              </el-form-item>
              <el-form-item label="secretKey" prop="secretKey">
                <el-input v-model="qiniuForm.secretKey"></el-input>
              </el-form-item>
              <el-form-item label="存储桶" prop="bucket">
                <el-input v-model="qiniuForm.bucket"></el-input>
              </el-form-item>
              <el-form-item label="区域" prop="zone">
                <el-input v-model="qiniuForm.zone"></el-input>
              </el-form-item>
              <el-form-item label="域名" prop="domain">
                <el-input v-model="qiniuForm.domain"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('qiniuForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 阿里云存储 -->
          <!-- <el-tab-pane label="阿里云存储" name="aliyun">
            暂未开放
          </el-tab-pane> -->

        </el-tabs>
      </el-tab-pane>

      <!-- 支付配置 -->
      <el-tab-pane label="支付配置">
        <el-tabs tab-position="top" v-model="zhifu" type="border-card">

          <!-- 微信支付 -->
          <el-tab-pane label="微信支付" name="wechat">
            <el-form ref="wechatForm" :model="wechatForm" :rules="wechatRules" label-width="150px">
              <!-- <el-form-item label="名称" prop="name">
                <el-input v-model="wechatForm.name" placeholder="请输入名称" />
              </el-form-item> -->
              <el-form-item label="appid" prop="appid">
                <el-input v-model="wechatForm.appid" placeholder="请输入appid" />
              </el-form-item>
              <el-form-item label="appSecret" prop="appSecret">
                <el-input v-model="wechatForm.appSecret" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              <el-form-item label="商户号" prop="mchId">
                <el-input v-model="wechatForm.mchId" placeholder="请输入商户号" />
              </el-form-item>
              <el-form-item label="p12证书" prop="certPath">
                <file-upload v-model="wechatForm.certPath" />
              </el-form-item>
              <el-form-item label="支付密匙" prop="certPassword">
                <el-input v-model="wechatForm.certPassword" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              <el-form-item label="支付回调域名" prop="notifyPayDomain">
                <el-input v-model="wechatForm.notifyPayDomain" placeholder="请输入支付回调域名" />
              </el-form-item>
              <el-form-item label="退款回调域名" prop="notifyRefoundDomain">
                <el-input v-model="wechatForm.notifyRefoundDomain" placeholder="请输入退款回调域名" />
              </el-form-item>
              <el-form-item label="AuthorizationCode" prop="authorizationCode">
                <el-input v-model="wechatForm.authorizationCode" placeholder="请输入AuthorizationCode" />
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="wechatForm.status">
                  <el-radio v-for="dict in dict.type.pay_config_status" :key="dict.value" :label="dict.value">{{
                    dict.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- <el-form-item label="默认" prop="isDefault">
                  <el-radio-group v-model="wechatForm.isDefault">
                    <el-radio v-for="dict in dict.type.pay_config_default" :key="dict.value" :label="dict.value">{{
                      dict.label }}</el-radio>
                  </el-radio-group>
                </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="submitForm('wechatForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 支付宝 -->
          <!-- <el-tab-pane label="支付宝" name="alipay">
            暂未开放
          </el-tab-pane> -->
        </el-tabs>
      </el-tab-pane>

      <!-- 隐私协议 -->
      <el-tab-pane label="隐私协议">
        <el-tabs tab-position="top" v-model="chengxu" type="border-card">

          <!-- 用户协议 -->
          <el-tab-pane label="用户协议" name="userAgreement">
            <el-form :model="userAgreementForm" :rules="userAgreementRules" ref="userAgreementForm" label-width="100px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="userAgreementForm.title" placeholder="请输入标题" />
              </el-form-item>
              <el-form-item label="内容">
                <!-- <editor v-model="userAgreementForm.content" :min-height="192" /> -->
                <wang-editor v-model="userAgreementForm.content" :min-height="292"></wang-editor>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="userAgreementForm.status">
                  <el-radio v-for="dict in dict.type.default_status" :key="dict.value" :label="dict.value">{{ dict.label
                    }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('userAgreementForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 隐私政策 -->
          <el-tab-pane label="隐私政策" name="privacyPolicy">
            <el-form :model="privacyPolicyForm" :rules="privacyPolicyRules" ref="privacyPolicyForm" label-width="100px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="privacyPolicyForm.title" placeholder="请输入标题" />
              </el-form-item>
              <el-form-item label="内容">
                <!-- <editor v-model="privacyPolicyForm.content" :min-height="192" /> -->
                <wang-editor v-model="privacyPolicyForm.content" :min-height="292"></wang-editor>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="privacyPolicyForm.status">
                  <el-radio v-for="dict in dict.type.default_status" :key="dict.value" :label="dict.value">{{ dict.label
                    }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('privacyPolicyForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 下单须知 -->
          <el-tab-pane label="下单须知" name="orderInstructions">
            <el-form :model="orderInstructionsForm" :rules="orderInstructionsRules" ref="orderInstructionsForm"
              label-width="100px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="orderInstructionsForm.title" placeholder="请输入标题" />
              </el-form-item>
              <el-form-item label="内容">
                <!-- <editor v-model="orderInstructionsForm.content" :min-height="192" /> -->
                <wang-editor v-model="orderInstructionsForm.content" :min-height="292"></wang-editor>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="orderInstructionsForm.status">
                  <el-radio v-for="dict in dict.type.default_status" :key="dict.value" :label="dict.value">{{ dict.label
                    }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('orderInstructionsForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

        </el-tabs>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
import { listResources, getResources, delResources, addResources, updateResources } from "@/api/resources/resources";
import { listPayConfig, getPayConfig, delPayConfig, addPayConfig, updatePayConfig } from "@/api/payConfig/payConfig";
import { listSlideshow, getSlideshow, delSlideshow, addSlideshow, updateSlideshow } from "@/api/slideshow/slideshow";
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/info/info";
import { listKefu, getKefu, delKefu, addKefu, updateKefu } from "@/api/kefu/kefu";


export default {
  dicts: ['resources_config_status', 'pay_config_type', 'pay_config_status', 'pay_config_default', 'slideshow_status', 'slideshow_position', 'default_status'],
  data() {
    return {
      //默认启动页
      cunchu: 'qiniu',
      zhifu: 'wechat',
      shouye: 'lunbo',
      chengxu: 'userAgreement',
      kefu: 'kefu',
      qiniuForm: {
        id: null,
        name: null,
        accessKey: null,
        secretKey: null,
        bucket: null,
        zone: null,
        domain: null,
      },

      qiniuRules: {
        accessKey: [
          { required: true, message: "accessKey不能为空", trigger: "blur" }
        ],
        secretKey: [
          { required: true, message: "secretKey不能为空", trigger: "blur" }
        ],
        bucket: [
          { required: true, message: "存储桶不能为空", trigger: "blur" }
        ],
        zone: [
          { required: true, message: "地区不能为空", trigger: "blur" }
        ],
        domain: [
          { required: true, message: "域名不能为空", trigger: "blur" }
        ],
      },
      // 微信支付表单
      wechatForm: {},
      wechatRules: {
        appid: [
          { required: true, message: "appid不能为空", trigger: "blur" }
        ],
        appSecret: [
          { required: true, message: "appSecret不能为空", trigger: "blur" }
        ],
        mchId: [
          { required: true, message: "商户号不能为空", trigger: "blur" }
        ],
        p12证书: [
          { required: true, message: "p12证书不能为空", trigger: "blur" }
        ],
        certPassword: [
          { required: true, message: "支付密匙不能为空", trigger: "blur" }
        ],
        notifyPayDomain: [
          { required: true, message: "支付回调域名不能为空", trigger: "blur" }
        ],
        notifyRefoundDomain: [
          { required: true, message: "退款回调域名不能为空", trigger: "blur" }
        ],
        authorizationCode: [
          { required: true, message: "AuthorizationCode不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ],
      },
      // 轮播图
      slideshowForm: {},
      slideshowRules: {},
      //用户协议
      userAgreementForm: {},
      userAgreementRules: {},
      //隐私政策
      privacyPolicyForm: {},
      privacyPolicyRules: {},
      //下单须知
      orderInstructionsForm: {},
      orderInstructionsRules: {},
      //客服配置
      kefuForm: {},
      kefuRules: {},
    };
  },
  //内容初始化
  created() {
    this.getDatas();
  },
  methods: {
    handleMainMenuClick(index) {
      this.mainActiveName = index;
      this.activeName = index === 'storage' ? 'qiniu' : 'wechat';
    },
    //切换标签
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    //页面数据初始化
    getDatas() {

      //微信支付初始化
      listPayConfig({
        pageNum: 1,
        pageSize: 1,
        name: 'wechatPay'
      }).then(res => {
        this.wechatForm = res.rows[0]
      })

      //轮播图初始化
      listSlideshow({
        pageNum: 1,
        pageSize: 1,
        position: 'INDEX'
      }).then(res => {
        this.slideshowForm = res.rows[0]
      })


      //文件存储初始化
      getResources(1).then(res => {
        this.qiniuForm = res.data
      })

      //用户协议初始化
      listInfo({
        pageNum: 1,
        pageSize: 1,
        position: 'UserAgreement'
      }).then(res => {
        this.userAgreementForm = res.rows[0]
      })

      //隐私政策初始化
      listInfo({
        pageNum: 1,
        pageSize: 1,
        position: 'PrivacyPolicy'
      }).then(res => {
        this.privacyPolicyForm = res.rows[0]
      })

      //下单须知初始化
      listInfo({
        pageNum: 1,
        pageSize: 1,
        position: 'OrderInstructions'
      }).then(res => {
        this.orderInstructionsForm = res.rows[0]
      })

      //客服初始化
      listKefu({
        pageNum: 1,
        pageSize: 1,
        position: 'Kefu'
      }).then(res => {
        this.kefuForm = res.rows[0]
      })

    },
    //表单提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm('您确定要提交表单吗？', '确认操作', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            //轮播图
            if (formName === 'slideshowForm') {
              updateSlideshow(this.slideshowForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDatas();
              });
            }

            //用户协议
            if (formName === 'userAgreementForm') {
              updateInfo(this.userAgreementForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDatas();
              });
            }

            //隐私政策
            if (formName === 'privacyPolicyForm') {
              updateInfo(this.privacyPolicyForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDatas();
              });
            }

            //下单须知
            if (formName === 'orderInstructionsForm') {
              updateInfo(this.orderInstructionsForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDatas();
              });
            }

            //文件存储
            if (formName === 'qiniuForm') {
              if (this.qiniuForm.id != null) {
                updateResources(this.qiniuForm).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.getDatas();
                });
              } else {
                this.$modal.msgError("操作失败");
              }
            }

            //微信支付
            if (formName === 'wechatForm') {
              console.log("微信支付")
              updatePayConfig(this.wechatForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDatas();
              });
            }

            //客服
            if (formName === 'kefuForm') {
              updateKefu(this.kefuForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDatas();
              });
            }


          }).catch(() => {
            this.$modal.msgError("操作已取消");
          });
        }
      });
    }

  },

};
</script>